
<template>
  
  <div class="UserNme-input">
    <!-- <button @click="count++">更新组件 (点击次数: {{ count }})</button> -->

<div style="margin: 20px auto;height: 30px; width: 420px; background-color: #F9FAFB;">
<el-input
  type="text"
  placeholder="Enter your username"
  v-model="username"
  maxlength="30"
  show-word-limit
>
</el-input>
<div v-if="username.length === 30" style="color: #f56c6c; font-size: 12px; text-align: right; margin-top:4px;">
      已达最大字数限制
    </div>

  </div>
  </div>


</template>

<script lang="js" setup>
import { ref, watch } from 'vue'
// import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
const username = ref('')
const count = ref('0')
// onBeforeMount(() => {
//   console.log('UserName.vue - onBeforeMount: 子组件1挂载前');
// });

// onMounted(() => {
//   console.log('UserName.vue - onMounted: 子组件1挂载完成');
// });

// onBeforeUpdate(() => {
//   console.log('UserName.vue - onBeforeUpdate: 子组件1更新前');
// });

// onUpdated(() => {
//   console.log('UserName.vue - onUpdated: 子组件1更新完成');
// });

// onBeforeUnmount(() => {
//   console.log('UserName.vue - onBeforeUnmount: 子组件1卸载前');
// });

// onUnmounted(() => {
//   console.log('UserName.vue - onUnmounted: 子组件1卸载完成');
// });

watch(username,(newValue,oldValue)=> {
  if (newValue.length <= 6) {
    console.log(`正在检验用户信息${newValue}`)
  }
})


</script>

<style lang="css">


</style>
